<template>
  <div>
    <div class="box-card">
      <div class="box-header">
        <span style="font-weight:900;">菜单详情</span>
        <button @click="print" style="float: right;padding:0;color:#409EFF;" type="text">打印</button>
        <button v-if="canModify" @click="modifyOrder" style="float: right; color:green;padding:0;margin-right:10px;color:green;" type="text">接单</button>
      </div>
      <div class="box-body">
        <div v-if="order&&order.address" class="flex-column item">
          <div class="label">地址：</div>
          <div class="flex-row">
            <div>
              {{order.address &&order.address.address[1]}}
              <span style="color:#333;margin-left:10px;">{{order.address&&order.address.address}}</span>
            </div>
            <div>{{order.address.name}} {{order.address.sex==1?'女士': '先生'}}</div>
          </div>
        </div>

        <div class="flex-column item">
          <div class="label">菜单：</div>
          <div class="flex-row" v-if="order && order.foodList">
            <div v-for="(item,index) in order.foodList" :key="index">
              {{item.name}} [{{item.type}}] ￥{{item.price}} - {{item.discount}} x {{item.price}}
            </div>
          </div>
        </div>

        <div v-if="order">
          <div class="flex-column item">
            <div class="label">用户留言：</div>
            <div> {{order.userSpeak}}</div>
          </div>
          <div style="text-align:right;color:red;">{{order.payStatus}} {{order.dealStatus}}</div>
          <div class="flex-column item">
            <div class="label">订单生成时间：</div>
            <div>{{order.createdAt}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Api from '@/api'
  export default {
    data() {
      return {
        // key: value
        id: '5c50f3a644d904004dcf62ad',
        order:null,
      }
    },
    mounted() {
      let id = this.$mp.query.id
      if (id) {
        this.id = id
      }
      this.initOrder()
    },
    methods: {
      async initOrder() {
        let res = await Api('orderById',{id:this.id}, 'get')
        res.data.address.address = res.data.address.address[0].join(' ')
        this.order = res.data
      },
      print() {
        this.$showToast({icon:'none',title:'蓝牙未连接'})
      }
    },
  }
</script>

<style scoped>
.box-card {
      width: 90%;
    margin: 40px auto;
    font-size: 13px;
    color: #333;
    line-height: 25px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        border: 1px solid #ebeef5;
    background-color: #fff;
    -webkit-transition: .3s;
    transition: .3s;
    border-radius: 4px;
}
.box-header {
  padding: 18px 20px;
    border-bottom: 1px solid #ebeef5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.box-body {
      padding: 20px;
}
.item {
  border-bottom: 1px solid rgba(0,0,0,.1);
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.label {
  font-weight: 500;
  font-size: 14px;
  min-width: 50px;
  margin-right: 10px;
  color: #222;
}
button {
  font-size: 12px;
  background: none;
  border: none;
}
button::before, button::after {
  content: '';
  border: none;
}
</style>